<template>
	<view class="content">
		<view class="forget-bg">
			<view class="forget-card">
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="username" placeholder="请输入你的账号" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="passwordone" placeholder="请输入你的密码" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="passwordtwo" placeholder="请确认你的密码" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="telephone" placeholder="请输入你的手机号" />
				</view>
				<view class="forget-input forget-margin-b">
					<input type="text" v-model="nickname" placeholder="请输入你的昵称" />
				</view>
				<view class="forget-input forget-margin-b">
					<radio-group name="radio" bindchange="radioChange">
						<label>
							<radio v-model="radio" value="1" /> 男
						</label>
						<label>
							<radio v-model="radio" value="2" /> 女
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="forget-btn">
			<button class="landing" type="primary" @tap="register">提交</button>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';

	export default {
		data() {
			return {
				username: '',
				passwordone: '',
				passwordtwo: '',
				telephone: '',
				nickname: '',
				radio: '男',
			}
		},
		methods: {
			register() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.username.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入账号'
					});
					return;
				}
				if (this.passwordone.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
					return;
				}
				if (this.passwordtwo.length <= 0 || this.passwordone != this.passwordtwo) {
					uni.showToast({
						icon: 'none',
						title: '密码和确认密码输入不一致'
					});
					return;
				}
				if (this.telephone.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '手机号码不合法'
					});
					return;
				}
				if (this.nickname.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					});
					return;
				}
				uni.request({
					url:"http://115.159.219.165:8080/user/addUser",
					data: {
						username: this.username,
						password: this.passwordone,
						telephone: this.telephone,
						nickname: this.nickname,
						roleId: 4,
						radio: '男',
					},
					method: 'POST',
					success: function(data) {
						console.log(data.data);
						uni.switchTab({
							url: '../login/login'
						});
						uni.showToast({
							title: '注册成功',
							duration: 2000
						});
					}.bind(this),
					fail: function(data, code) {
						console.log('fail' + JSON.stringify(data));
					}
				})
			}
		}
	}
</script>

<style>
	.verify-left{
		width: calc(100% - 260upx);
	}
	.verify-right{
		padding-left: 20upx;
	}
	.verify-btn{
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		width: 240upx;
		border-radius: 8upx;
		background: linear-gradient(left,#FF978D, #FFBB69);
	}
	.verify-left,.verify-right{
		float: left;
	}
	.landing{
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: linear-gradient(left,#0faeff, #87CEEB);
	}
	.forget-btn{
		padding: 10upx 20upx;
		margin-top: 680upx;
	}

	.forget-input input{
		background: #F2F5F6;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.forget-margin-b{
		margin-bottom: 25upx;
	}
	.forget-input{
		padding: 10upx 20upx;
		overflow: auto;
	}
	.forget-card{
		background: #fff;
		border-radius: 12upx;
		padding: 60upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0,0,0,0.12);
		position: relative;
		margin-top: 120upx;
	}
	.forget-bg {
		height: 260upx;
		padding: 25upx;
		background: linear-gradient(#0faeff, #87CEEB);
	}
</style>
